<script setup lang="ts">
import {ref, defineProps} from 'vue'
import {receive, singleCouponInfo} from "../api/coupon.ts";
import {parseCouponCategory, parseCouponStatus} from "../utils";
import {singleStoreInfo} from "../api/store.ts";

const role = sessionStorage.getItem('role')
const couponNum = ref()
const receivedNum = ref()
const couponScope = ref('')
const category = ref('')
const haveOver = ref()
const haveReceived = ref()
const storeId = ref()
const fullAmount = ref()
const disAmount = ref()
const target = ref()
const props = defineProps<{
  couponId : number,
}>()


singleCouponInfo(props.couponId).then(res =>{
  couponNum.value = res.data.result.couponCount
  receivedNum.value = res.data.result.receivedCount
  couponScope.value = res.data.result.couponScope
  category.value = res.data.result.couponType
  haveReceived.value = res.data.result.userStatus
  storeId.value = res.data.result.storeId
  fullAmount.value = res.data.result.fullAmount
  disAmount.value = res.data.result.discountAmount
  haveOver.value = res.data.result.couponGroupStatus
  if(couponScope.value === 'GLOBAL'){
    target.value = "所有商店"
  }
  else{
    singleStoreInfo(storeId.value).then(res =>{
      target.value = res.data.result.name
    })
  }
})

function customReceive(){
  receive(props.couponId).then(res =>{
    if (res.data.code === '000') {
      ElMessage({
        message: "领取成功",
        type: 'success',
        center: true,
      })
      haveReceived.value = 'RECEIVED'
    }
    else{
      ElMessage({
        message: res.data.msg,
        type: 'error',
        center: true,
      })
    }
  })

}
</script>

<template>
  <el-card class="coupon-item-card" shadow="hover">
    <h1> 优惠券组ID:{{ props.couponId }} </h1>
    <el-descriptions label-align="right"
                     width="150px"
                     :column="3"
                     border >
      <el-descriptions-item label="优惠券种类" align="center">
        <el-tag>{{ parseCouponCategory(category) }}</el-tag>
        <el-text v-if = "category == 'FULL_REDUCTION'" >(满{{ fullAmount }}元减{{ disAmount }}元)</el-text>
        <el-text v-if = "category == 'NO_LIMIT'" >(立减{{ disAmount }}元)</el-text>

      </el-descriptions-item>
<!--      <el-descriptions-item label="满减规则"  align="center" v-if = "category == 'FULL_REDUCTION'">-->
<!--        满{{ fullAmount }}元减{{ disAmount }}元-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item label="使用对象"  align="center">
        {{ target }}
      </el-descriptions-item>
      <el-descriptions-item label="状态"  align="center">
        {{ parseCouponStatus(haveOver) }}
      </el-descriptions-item>
      <el-descriptions-item label="发布总量"  align="center" v-if = "role != 'CUSTOMER'">
        {{ couponNum }}张
      </el-descriptions-item>
      <el-descriptions-item label=已领取数量  align="center" v-if = "role != 'CUSTOMER'">
        {{ receivedNum }}张
      </el-descriptions-item>
    </el-descriptions>

    <el-button v-if = "role == 'CUSTOMER' && haveReceived == 'NOT_RECEIVED'" type = primary @click = "customReceive">领取</el-button>
    <el-button v-if = "role == 'CUSTOMER' && haveReceived == 'RECEIVED'" plain disabled>已领取</el-button>
  </el-card>

</template>

<style scoped>

</style>